<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				position: absolute;
				left: 50%;
				width: 800px;
				height: 600px;
				margin-left: -400px;
				top: 50%;
				margin-top: -300px;
				text-align: center;		
			}
			video{				
				width: 800px;
			}
		</style>
	</head>
	<body>
		<div>
			<video id="video" src="http://www.pzhuweb.cn/data/dalabengba.mp4"></video>
			<span id="note">当前时间/总时间</span>
			<button id="con">播放</button>
		</div>
		<script>
			video = document.getElementById("video");
			con = document.getElementById("con");
			
			video.addEventListener("loadeddata",init,false);
			video.addEventListener("timeupdate",updataTime,false);
			con.addEventListener("click",videoPlay,false);
			
			
			function init(){				
				document.getElementById("note").innerHTML = asTime(video.currentTime) + "/" + asTime(video.duration);
			}
			function videoPlay(){
				if (video.paused) {
					video.play();
					con.innerHTML = "暂停";					
				} else{
					video.pause();
					con.innerHTML = "播放";	
				}
			}
			function updataTime(){
				document.getElementById("note").innerHTML = asTime(video.currentTime) + "/" + asTime(video.duration);
			}
			
			function asTime(t){
				t = Math.round(t);
				var min = Math.floor(t/60);
				var sec = t%60;
				if (min<10) {
					min = "0"+min;
				}
				if (sec<10) {
					sec = "0"+sec;
				}
				return min + ":" + sec;
			}
		</script>
		
	</body>
</html>
